<template>
  <div class="step_date">
    <span class="text">{{props.frontText}}</span>
    <span class="gap"></span>
    <el-input-number v-model="state.exec_cycle" :min="1" size="small" @change="changeDate" />
    <span class="gap"></span>
    <el-select v-model="state.exec_cycle_type" size="small" @change="changeDate">
      <el-option
        v-for="item in dateOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <span class="gap" v-if="state.exec_cycle_type === 'day'"></span>
    <el-time-select
      v-if="state.exec_cycle_type === 'day'"
      v-model="state.exec_time"
      start="00:00"
      step="00:30"
      end="23:30"
      size="small"
      :clearable="false"
      @change="changeDate"
    />
    <span class="gap"></span>
    <span class="text">{{props.endText}}</span>
  </div>
</template>

<script setup lang="tsx">
import { reactive, ref, watch, computed, onMounted } from 'vue'

interface StepDateType{
  exec_cycle?: number
  exec_cycle_type?: string
  exec_time?: string
}

interface Props {
  modelValue: StepDateType,
  frontText: string,
  endText: string,
}

const dateOptions = [
  {
    value: 'day',
    label: '天',
  },
  {
    value: 'hour',
    label: '时',
  }
]

let state = reactive<StepDateType>({})

const props = withDefaults(defineProps<Props>(), {
    modelValue: ()=>{return {
      exec_cycle: 1,
      exec_cycle_type: '',
      exec_time: ''
    }},
    frontText: '每',
    endText: '增量同步订单数据。',
})

const emit = defineEmits(['update:modelValue'])

const changeDate = () => {
  emit('update:modelValue', state)
}

const init = () => {
  state.exec_cycle = props.modelValue.exec_cycle
  state.exec_cycle_type = props.modelValue.exec_cycle_type
  state.exec_time = props.modelValue.exec_time
}

onMounted(()=>{
  init()
})

watch(()=>props.modelValue, (val)=>{
  init()
})

</script>

<style scoped lang="scss">
  .step_date{
    display: flex;
    align-items: center;
    .gap{
      width: 4px;
    }
    .text{
      font-size: 12px;
      color: #666;
      line-height: 1.5;
    }
    .el-select--small{
      width: 100px;
    }
    .el-input-number--small{
      width: 100px;
    }

  }
</style>
